import {Form, Input, Select, Checkbox, Row, Col, message} from 'antd';
import type { FormInstance } from 'antd/es/form';
import React, {useEffect, useState} from 'react';
import {createUser, getUserShow, updateUser} from "../../../api/user";
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import {getRole, paginate} from "../../../api/role";

type PropsType = React.PropsWithChildren<{
    afterSubmit?: (values: any, form: FormInstance<any>) => void;
    userInfo:any
}>;
type optionType = {
    label:string
    value:string
    name:string
    id:string
}
const UsersForm = (props: PropsType, ref?: React.ForwardedRef<FormInstance>) => {

    //console.log("获取userinfo",props.userInfo)
    const [form] = Form.useForm();
    const [paginate, setPaginate] = useState({page:1,per_page:20});
    const [roleList, setRoleList] = useState([]);
    const [userForm, setUserForm] = useState({});
    const [userInfo, setUserInfo] = useState({username: ""});
    const [isEdit, setIsEdit] = useState(true);
    const [id, setId] = useState(0);
    useEffect(() => {
        //console.log("打印",props.userInfo.username)
        props.userInfo===false?setIsEdit(false):setIsEdit(true)
        //修改获取详情
        if(props.userInfo)getRow(props.userInfo.id)

        //form.setFieldsValue(formInit)
        setId(props.userInfo.id)
        //form.current(props.userInfo)
        getRole(paginate).then(res=>{
            setUserInfo({username: ""})

            if(res.data.code===1){
                const roleList= res.data.data.list.map((item:optionType)=>{
                    item.label = item.name
                    item.value = item.id
                    return item
                })
                setRoleList(roleList)
            }
        })
    }, []);

    const getRow = (id:number)=>{
        getUserShow(id).then(res=>{
            if(res.data.code===1){
                const roles = res.data.data.role.map((item:any)=>{
                    return item.id
                })
                res.data.data.role = roles
                form.setFieldsValue(res.data.data)
            }
        })
    }

    const create =(values:any)=>{
        createUser(values).then(res=>{
            if(res.data.code===1)message.success(res.data.message)
        })
    }
    const update =(values:any)=>{
        updateUser(values,id).then(res=>{
            if(res.data.code===1)message.success(res.data.message)
        })
    }

    // 提交后获取表单数据，请求接口，重置表单并关闭
    const onSubmit = (values: any) => {
        console.log(values);
        //await  fetch ...
        isEdit===true ? update(values):create(values)
        form.resetFields();
        props.afterSubmit?.(values, form);
    };
    const onChange = (checkedValues: CheckboxValueType[]) => {
        //console.log('checked = ', checkedValues);
        setUserForm({'role':checkedValues})
    };

    return (
        <div className="form">
            <Form
                onFinish={onSubmit}
                initialValues={form}
                ref={ref}
                form={form}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 16 }}
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{ required: true, message: 'Please input  username!' }]}
                >
                    <Input defaultValue={userInfo.username}/>
                </Form.Item>
                <Form.Item
                    label="真实姓名"
                    name="realname"
                    rules={[{ required: true, message: 'Please input  realname!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="手机号"
                    name="phone"
                    rules={[{ required: true, message: 'Please input  phone!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="用户邮箱"
                    name="email"
                   // rules={[{ required: true, message: 'Please input mail!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="用户角色"
                    name="role"
                    rules={[{ required: true, message: 'Please select role!' }]}
                >
                    <Checkbox.Group style={{ width: '100%' }} onChange={onChange}
                                    options={roleList}
                    >

                    </Checkbox.Group>
                </Form.Item>

            </Form>

        </div>
    );
};
export default UsersForm;
